<template>
  <div class="book">
    <div>
      <div class="book-info-content">
        <img :src="book.bigImgUrl" alt="" />
        <div class="book-info">
          <h3>{{ book.title }}</h3>
          <p>{{ book.slogan }}</p>
          <p>
            <span>作者:{{ book.author }}</span>
            <span>出版社:{{ book.bookConcern }}</span>
            <span>出版日期:{{ book.publishDate }}</span>
          </p>
          <p>
            <span class="fact-price">
              {{ currency(factPrice(book.price, book.discount)) }}
            </span>
            <span class="discount">
              [{{ formatDiscount(book.discount) }}]
            </span>
            <span
              >[定价 <i class="price">{{ currency(book.price) }}</i> ]</span
            >
          </p>
        </div>
      </div>

      <div class="add-cart">
        <AddSubtractButton
          :quantity="quantity"
          @updateQuantity="handleUpdate"
        />
        <button class="add-cart-button" @click="addCart(book)">
          加入购物车
        </button>
      </div>
    </div>
    <BookTabComponent :content="book.detail" :url="url" />
  </div>
</template>

<script>
import AddSubtractButton from "@/components/Book/AddSubtractButton";
import BookTabComponent from "@/components/Book/BookTabComponent";
import { mapActions } from "vuex";
export default {
  name: "Book",
  data() {
    return {
      book: {},
      quantity: 0,
    };
  },
  props: ["url"],
  inject: ["factPrice", "currency"],
  components: {
    AddSubtractButton,
    BookTabComponent,
  },
  watch: {
    url: {
      immediate: true,
      handler() {
        this.display();
      },
    },
  },
  methods: {
    display() {
      this.axios
        .get(this.url)
        .then((response) => {
          if (response.status == 200) {
            this.book = response.data;
          }
        })
        .catch((error) => alert(error));
    },
    handleUpdate(value) {
      this.quantity = value;
    },

    ...mapActions("cart", ["addProductToCart"]),

    addCart(book) {
      let quantity = this.quantity;

      if (quantity === 0) {
        quantity = 1;
      }
      let newItem = {
        ...book,
        price: this.factPrice(book.price, book.discount),
      };
      this.addProductToCart({ ...newItem, quantity });
      this.$router.push("/cart");
    },

    formatDiscount(value) {
      if (value) {
        let strDigits = value.toString().substring(2);
        strDigits += "折";
        return strDigits;
      } else {
        return value;
      }
    },
  },
};
</script>
<style scoped>
.book {
  margin-top: 10px;
  border: 1px solid #ccc;
  height: 96.6%;
  border-radius: 10px;
  margin: 10px 0 10px 10px;
}
.book .book-info-content {
  width: 1110px;
  margin-top: 10px;
}
.book img {
  width: 200px;
  float: left;
  padding: 0 10px 0 50px;
}
.book .book-info {
  width: 700px;
  margin: 0;
  background: rgba(146, 146, 146, 0.192);
  float: left;
  padding-left: 20px;
}
.book .book-info span {
  margin: 5px;
}
.book .add-cart {
  clear: left;
  display: flex;
  justify-content: center;
}
.book .add-cart-button {
  width: 90px;
  height: 36px;
  color: white;
  background: rgb(238, 30, 30);
  outline: none;
  border: none;
  border-radius: 6px;
  box-shadow: rgb(0, 0, 0);
  margin: 6px;
  cursor: pointer;
}
</style>
